$(function () {
    $("ul>li").click(function () {
        //给li添加下横线 
        $(this).addClass('active').siblings('li').removeClass('active');
        var index = $(this).index(); //显示对应的div 
        $('.tab').eq(index).addClass('selected').siblings('div').removeClass('selected');
    })
    var option8 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '10%',
            top: '8%',
            containLabel: true
        },
        xAxis: {
            name: '户数',
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#e6e6e6'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#e6e6e6',
                    type: 'solid'
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: ['水利局', '农正局', '扶贫办', '教育局', '医保局', '社保局', '住建局', '卫计委'],
            axisLine: {
                lineStyle: {
                    color: '#e6e6e6'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
                name: '直接访问',
                type: 'bar',
                stack: '总量',
                 barWidth : 15,
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                       
                    }
                },
                itemStyle: { //柱子的属性设置
                    normal: {
                        color: '#7088d9', //柱子的颜色设置
                    }
                },
                
                data: [320, 302, 301, 334, 390, 330, 320, 320]
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '总量',
                 barWidth : 15,
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        color:'#fff'
                    }
                },
                   itemStyle: { //柱子的属性设置
                    normal: {
                        color: '#d97b49', //柱子的颜色设置
                    }
                },
                data: [120, 132, 101, 134, 90, 230, 210, 222]
            }
        ]
    };
    var chart8 = echarts.init(document.getElementById("chart8"));
    chart8.setOption(option8);
    setInterval(function () {
        // $('#mb-overcome').css('width',($('.mb-long-hold').width()-40));
        $('#chart8').css('height', ($('.chartBox8').height()))
        $('#chart8').css('width', ($('.chartBox8').width()))
        chart8.resize();
    }, 200)
    chart8.on('click',function(params){
        $(".zp-pop-up").show(200);
        // if(params.componentSubType == 'line'){
        //
        // }
    });
    // 各乡镇帮扶情况统计
    var option10 = {
        tooltip: { //聚焦触发的效果，详情可参见。全局设置
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#f8f1ff'
                }
            }
        },
//      toolbox: { //图表容器的右上角工具栏
//          feature: {
//              dataView: {
//                  show: true,
//                  readOnly: false
//              },
//              magicType: {
//                  show: true,
//                  type: ['line', 'bar']
//              },
//              restore: {
//                  show: true
//              },
//              saveAsImage: {
//                  show: true
//              }
//          }
//      },
        legend: { //图表图例注释
            right: '10%',
            data: ['降水量', '蒸发量', '温度'],
             textStyle: {
                color: '#fff'
            }
        },
        xAxis: [ //x轴属性设置，需要详细了解该模块属性配置，可参见http://echarts.baidu.com/option.html#xAxis
            {
                type: 'category', //表示类型为科目类
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], //坐标轴的值
               axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            }
        ],
        yAxis: [ //（可以有多个坐标轴），数组中的对象位置决定了yAxisIndex的值（yAxisIndex会在series中用到）
            {
                type: 'value', //表示属性为value类
                name: '降水', //坐标轴名称
                minInterval: 1, //坐标最小划分单位，设置为1表示坐标轴节点保留整数
                splitNumber: 4, //指定坐标轴节点分割数（非强制），会按照预算自行调整最合适的分割数
                 
                axisLine: { //表示坐标轴是否显示
                    show: false
                },
                splitLine: { //表示分割线属性设置
                    lineStyle: { //表示分割线的样式
                        type: 'dashed' //虚线
                    }
                },
                axisLabel: {
                    formatter: '{value} ml', //表示所有值得单位
                     textStyle: {
                color: '#fff'
            },
                }
            },
            {
                type: 'value',
                name: '温度',
                minInterval: 1,
                splitNumber: 4,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [ //坐标轴实际数据内容
            {
                name: '降水量', //数据名称
                type: 'bar', //数据表现形式（bar为柱形图，line为折线图）
                barWidth: '20%', //柱形图宽度
                itemStyle: { //柱子的属性设置
                    normal: {
                        color: '#5fabff', //柱子的颜色设置
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] //该条数据对应一条记录
            },
            {
                name: '蒸发量',
                type: 'bar',
                barGap: '0%',
                barWidth: '20%',
                itemStyle: {
                    normal: {
                        color: '#25dfab',
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
                name: '温度',
                type: 'line', //折线图
                yAxisIndex: 1,
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            colorStops: [{ //渐变模式
                                offset: 0,
                                color: '#ed8e03' // 0% 处的颜色      //折线开始的颜色
                            }, {
                                offset: 1,
                                color: '#ed8e03' // 100% 处的颜色    //折线结束的颜色，
                            }],
                            globalCoord: true // 缺省为 false
                        },
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ],
        grid: { //设置网格属性
            left: '10%', //网格距离容器左侧的距离
            right: '10%', //网格距离容器右侧的距离
            borderWidth: 1
        }
    };
    var chart10 = echarts.init(document.getElementById("chart10"));
    chart10.setOption(option10);
    setInterval(function () {
        // $('#mb-overcome').css('width',($('.mb-long-hold').width()-40));
        $('#chart10').css('height', ($('.chartBox10').height()))
        $('#chart10').css('width', ($('.chartBox10').width()))
        chart10.resize();
    }, 200)



    var option20 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    
    legend: {
        data:['蒸发量','降水量','平均温度'],
         textStyle: {
                color: '#fff'
            }
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisPointer: {
                type: 'shadow'
            },
             axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
                formatter: '{value} ml',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle: {
  	                   normal: {
  	                	   barBorderRadius: false,
  	                       color: '#4591cb',
  	                   }
  	              }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            itemStyle: {
  	                   normal: {
  	                	   barBorderRadius: false,
  	                       color: '#38e7df',
  	                   }
  	              }
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
             itemStyle: {
  	                   normal: {
  	                	   barBorderRadius: false,
  	                       color: '#ed8e03',
  	                   }
  	              }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
 var chart20 = echarts.init(document.getElementById("chart20"));
    chart20.setOption(option20);
    setInterval(function () {
        // $('#mb-overcome').css('width',($('.mb-long-hold').width()-40));
        $('#chart20').css('height', ($('.chartBox20').height()))
        $('#chart20').css('width', ($('.chartBox20').width()))
        chart20.resize();
    }, 200)
     var option21 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['直接访问', '邮件营销'],
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '10%',
            top: '8%',
            containLabel: true
        },
        xAxis: {
            name: '户数',
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#e6e6e6'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#e6e6e6',
                    type: 'solid'
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: ['水利局', '农正局', '扶贫办', '教育局', '医保局'],
            axisLine: {
                lineStyle: {
                    color: '#e6e6e6'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
                name: '直接访问',
                type: 'bar',
                stack: '总量',
                 barWidth : 20,
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                       
                    }
                },
                itemStyle: { //柱子的属性设置
                    normal: {
                        color: '#7088d9', //柱子的颜色设置
                    }
                },
                
                data: [320, 302, 301, 334, 390]
            },
            {
                name: '邮件营销',
                type: 'bar',
                stack: '总量',
                 barWidth : 20,
                label: {
                    normal: {
                        show: true,
                        position: 'insideRight',
                        color:'#fff'
                    }
                },
                   itemStyle: { //柱子的属性设置
                    normal: {
                        color: '#d97b49', //柱子的颜色设置
                    }
                },
                data: [120, 132, 101, 134, 90]
            }
        ]
    };
    var chart21 = echarts.init(document.getElementById("chart21"));
    chart21.setOption(option21);
    setInterval(function () {
        // $('#mb-overcome').css('width',($('.mb-long-hold').width()-40));
        $('#chart21').css('height', ($('.chartBox21').height()))
        $('#chart21').css('width', ($('.chartBox21').width()))
        chart21.resize();
    }, 200)
});